{include file="public/header,public/nav,public/fixbar" title="我的兑换-<?php echo request()->pc_info['seo_title']?>"/}
<div class="layui-body">
    <div class="layui-container">
        <div class="layui-col-space15">
            <!-- 菜单栏 -->
            <div class="layui-col-xs12 layui-col-sm4 layui-col-md4 layui-col-lg3">
                <div class="layui-main user-main min-height-90vh">
                    {include file="user/menu"/}
                </div>
            </div>
            <div class="layui-col-xs12 layui-col-sm8 layui-col-md8 layui-col-lg9">
                <div class="layui-main user-main min-height-90vh">
                    <h2>我的兑换</h2>
                    <blockquote class="layui-elem-quote" style="padding: 30px;">
                        <div class="layui-row" style="display: flex; justify-content: center;">
                            <div class="layui-col-xs12 layui-col-md8">
                                <div class="layui-input-xl" style="margin-bottom: 0px;">
                                    <input name="code" value="" class="layui-input" placeholder="输入兑换码" lay-verify="required" lay-verType="tips" lay-reqtext="请输入有效兑换码" style="font-size: 16px;" id="validate-code">
                                    <button type="button" class="layui-btn layui-btn-xl layui-bg-success" style="border-radius: 0px 5px 5px 0px;" id="exchangeBtn">立即兑换</button>
                                </div>
                                <div class="layui-form-mid layui-text-em">请输入兑换码，注意区分大小写，如有疑问，请联系客服。</div>
                            </div>
                        </div>
                    </blockquote>
                    <div class="layui-tab layui-tab-brief padding-bottom-10">
                        <ul class="layui-tab-title">
                            <li class="layui-this select-type" data-type="1">商品</li>
                            <li class="select-type" data-type="2">省钱卡</li>
                            <li class="select-type" data-type="3">会员卡</li>
                        </ul>
                    </div>
                    <div class="layui-row">
                        <div class="layui-col-space15 scrollbar height-700" id="exchange-list" style="height: 540px;">
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{include file="public/footer"/}
<script type="text/javascript">
    layui.use(['flow','layer','form'], function(){
        var layer = layui.layer, flow = layui.flow, form = layui.form, $=layui.jquery;
        
        // 立即兑换
        $("#exchangeBtn").click(function(){
            var isValid = form.validate('#validate-code');
            if (isValid) {
                var code = $("input[name=code]").val();
                var loading = layer.msg('数据处理中..', {icon: 16,shade: 0.3,time: false});
                $.ajax({
                    url:'/user/exchange',
                    type:'post',
                    data:{"code":code},
                    dataType:"JSON",
                    headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                    success:function(res){
                        layer.close(loading);  //返回数据关闭loading
                        if(res.code == 0){
                            $("#exchangeBtn").removeClass("layui-bg-success").addClass("layui-btn-disabled");
                            $("#exchangeBtn").attr("disabled","true");
                            layer.msg(res.msg,{icon: 1,time:1500},function(){
                                var index= parent.layer.getFrameIndex(window.name);//获取当前层
                                parent.layer.close(index);//关闭当前层
                                parent.location.reload();
                            });
                            
                        } else{
                            layer.msg(res.msg,{icon: 2});
                        }
                    },
                    error:function(e){
                        layer.msg('请求失败'+e.responseText,{icon: 2});
                    },
                    
                });
            }
        })

        var type = 1;
        $(function(){
            loadList(type);  // 加载列表
        })

        // 根据类型读取
        $(".select-type").on('click', function(){
            type = $(this).data('type');
            $('#exchange-list').html('');
            loadList(type);
        });

        // 分页加载列表
        function loadList(){
            var limit = 10;//每次请求的条数
            flow.load({
                elem: '#exchange-list' //指定列表容器
                ,scrollElem: '#exchange-list'//滚动条所在元素
                ,end: '—— 已经到底了~ ——'
                ,done: function(page, next){ //到达临界点（默认滚动触发），触发下一页的回调
                    $.ajax({
                        type: "post",
                        dataType: "json",
                        data: {'page': page, 'limit':limit, 'type':type},//请求的页码和每页显示条数
                        url: '/user/exchange_log',
                        success: function (res) {
                            var lis = [];
                            if(res.code == 0){
                                if (res.data.length > 0) {
                                    
                                    var newsHtml = '';
                                    layui.each(res.data, function(index, item){
                                        if (type == 1) {
                                            newsHtml = goods_log(item, newsHtml);
                                        } else if (type == 2) {
                                            newsHtml = savings_card_log(item, newsHtml);
                                        } else if (type == 3) {
                                            newsHtml = member_level_log(item, newsHtml);
                                        }
                                        
                                    });
                                    
                                    lis.push(newsHtml);
                                    //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                                    //res.total为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                                    next(lis.join(''), page < Math.ceil(res.count/limit));
                                    
                                } else {
                                    $('#exchange-list').html('<div class="layui-empty"><img src="/static/images/nodata/null_data.png"><p>暂无兑换记录~</p></div>');
                                }
                            } else {
                                layer.msg(res.msg, {icon:2, time: 1500});
                            }
                        }
                        ,error:function(e){
                            layer.closeAll();
                            layer.msg("请求失败："+e.msg, {icon:2, time: 1500});
                        },
                    });
                }
            });
        }
        
        // 兑换商品
        function goods_log(item, newsHtml) {
            var courses = '';
            if (item.course_list) {
                layui.each(item.course_list, function(key, course){
                    courses += 
                    `<div class="item">
                        <img class="user-course-img" src="${course.head_imgs}">
                        <div class="detail layui-ellip" style="width: 100%;">
                            <div class="product-title space-between">
                                <p class="layui-ellip"><span class="item-title-label">${course.product_type_text}</span>${course.product_name}</p>
                            </div>
                            <div class="space-between" style="margin-top: 10px;color:#999;">
                                <p>规格：${course.name}</p>
                                <p>x1</p>
                            </div>
                        </div>
                    </div>
                    <hr class="layui-order-gray">`;
                })
            }
            newsHtml += `<div class="layui-col-xs12">
                            <div class="layui-card">
                                <div class="layui-card-body goods-spec-item">
                                    ${courses}
                                </div>
                                <div class="layui-card-footer">
                                    <p class="text">兑换日期：${item.use_time}</span></p>
                                    <p class="text">兑换码：${item.code}</span></p>
                                </div>
                            </div>
                        </div>`;

            return newsHtml;
        }

        // 兑换省钱卡
        function savings_card_log(item, newsHtml) {
            var card = `<div class="item">
                <img class="user-course-img" src="${item.img}">
                <div class="detail layui-ellip" style="width: 100%;">
                    <div class="product-title space-between">
                        <p class="layui-ellip">${item.card.name}</p>
                    </div>
                    <div class="space-between" style="margin-top: 10px;color:#999;">
                        <p>时长：28天</p>
                        <p>x1</p>
                    </div>
                </div>
            </div>
            <hr class="layui-order-gray">`;
            newsHtml += `<div class="layui-col-xs12">
                            <div class="layui-card">
                                <div class="layui-card-body goods-spec-item">
                                    ${card}
                                </div>
                                <div class="layui-card-footer">
                                    <p class="text">兑换日期：${item.use_time}</span></p>
                                    <p class="text">兑换码：${item.password}</span></p>
                                </div>
                            </div>
                        </div>`;

            return newsHtml;
        }

        // 兑换会员卡
        function member_level_log(item, newsHtml) {
            var card = `<div class="item">
                        <img class="user-course-img" src="${item.img}">
                        <div class="detail layui-ellip" style="width: 100%;">
                            <div class="product-title space-between">
                                <p class="layui-ellip">${item.level.name}</p>
                            </div>
                            <div class="space-between" style="margin-top: 10px;color:#999;">
                                <p>时长：${item.valid_date}</p>
                                <p>x1</p>
                            </div>
                        </div>
                    </div>
                    <hr class="layui-order-gray">`;
            newsHtml += `<div class="layui-col-xs12">
                            <div class="layui-card">
                                <div class="layui-card-body goods-spec-item">
                                    ${card}
                                </div>
                                <div class="layui-card-footer">
                                    <p class="text">兑换日期：${item.use_time}</span></p>
                                    <p class="text">兑换码：${item.password}</span></p>
                                </div>
                            </div>
                        </div>`;

            return newsHtml;
        }
    });

</script>